<template>
    <div>
        <!-- 头部 -->
        <div class="top">
            <div class="top_help">
                <ul class="top_ul">
                    <li>加盟合作</li>
                    <li>企业新闻</li>
                    <li>投诉建议</li>
                    <li>免费报价</li>
                </ul>
            </div>
        </div>
        <!-- 导航和logo -->
        <nav>
            <div class="logo">
                <img src="/public/Pict/ValAddedBiz/Logo.jpeg" alt="" height="60px">
            </div>
            <div class="nav_right">
                <ul>
                    <li>首页</li>
                    <li>装修服务</li>
                    <li>品质保障</li>
                    <li>精英团队</li>
                    <li>装修案例</li>
                    <li>装修现场</li>
                    <li>实景案例库</li>
                    <li>了解猫老爷</li>
                </ul>
            </div>
        </nav>
        <router-view></router-view>
        <!-- 底部 -->
        <div class="footer">
            <img src="/public/Pict/ValAddedBiz/Footer.png" alt="">
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
</script>

<style scoped>
ul {
    margin: 0;
}

/* <!-- 头部 --> */
.top {
    background-color: #F0F0F0;
    height: 40px;
}

.top_help {
    width: 80%;
    margin: 0 auto;
}

.top_ul {
    float: right;
    margin: 0;
}

.top_help::after,
.top_ul::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.top_ul li {
    float: right;
    margin-left: 20px;
    line-height: 40px;
    color: #666777;
    cursor: pointer;
}

.top_ul li:hover {
    color: rgb(26, 66, 243);
}

/* <!-- 导航和logo --> */
nav {
    width: 80%;
    margin: 0 auto;
    height: 60px;
    display: flex;
    justify-content: space-between;
}

.nav_right ul {
    display: flex;
}

.nav_right ul li {
    margin-left: 40px;
    line-height: 60px;
    color: #222;
}

.nav_right ul li:hover {
    color: rgb(26, 66, 243);
    cursor: pointer;
}

/* <!-- 底部 --> */
.footer {
    background-color: #222;
    width: 100%;
}

.footer img {
    width: 100%;
}
</style>
